<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>执行上下文栈</title>
</head>

<body>
    <!-- 
        1. 在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象
        2. 在全局执行上下文（window）确定后，将其添加到栈中（压栈）
        3. 在函数执行上下文创建后，将其添加到栈中（压栈）
        4. 在当前函数执行完成后，将栈顶的对象移除（出栈）
        5. 当所有的代码执行完成后，占中只剩下window
        ** 执行上下文个数为n+1（n为函数调用次数；1是window）
     -->
    <script>
        // 产生全局执行上下文对象window
        var a = 10
        var fn1 = function (x) { 
            var b = 5
            // 这样写不会产生问题，因为这个函数并没有执行，它只是被赋值给了fn1这个变量
            // 产生
            fn2(x + b)
        }
        var fn2 = function (y) {
            var c = 5
            console.log(a + c + y)
        }
        // fn1被调用之后，会产生3个执行上下文
        fn1(10)
    </script>
</body>

</html>